<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta name="keywords" content="weather icons,animated icons,animated weather icons,svg animation,meteocons,weather,open source weather icons,icon pack,icons"/>
	<meta name="description" content="A free to use set of weather icons that are simple and animated."/>
	<meta name="robots" content="index,follow"/>
	<meta name="revisit-after" content="1 day"/>
	<meta name="author" content="Bas Milius"/>

	<title>Weather Icons by Bas</title>

	<link rel="stylesheet" href="https://unpkg.com/@latte-ui/css@2.0.0-dev.7/dist/latte-ui.css" type="text/css"/>
	<link rel="stylesheet" href="https://font.mili.us/css2?family=jetbrains-mono-variable:ital" type="text/css"/>
	<style>
        body
        {
            font-family: jetbrains-mono, monospace;
        }

        .wi-icons
        {
            position: relative;
            display: grid;
            grid-gap: 15px;
            grid-template-columns: repeat(5, 1fr);
        }

		.wi-icons-new
		{
            grid-gap: 9px;
			grid-template-columns: repeat(10, 1fr);
		}

        @media (max-width: 991px)
        {
            .wi-icons
            {
                grid-template-columns: repeat(3, 1fr);
            }

            .wi-icons-new
            {
                grid-gap: 9px;
                grid-template-columns: repeat(6, 1fr);
            }
        }

        @media (max-width: 767px)
        {
            .wi-icons
            {
                grid-template-columns: repeat(2, 1fr);
            }

            .wi-icons-new
            {
                grid-gap: 9px;
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .wi-icon
        {
            position: relative;
            display: flex;
            padding: 24px 6px;
            align-items: center;
            flex-flow: column;
            justify-content: center;
            background: hsla(var(--gray-0));
            border-radius: 6px;
			box-shadow: var(--shadow-2);
        }

        .wi-icon img
        {
            position: relative;
            display: block;
            height: 120px;
            width: 120px;
            margin-bottom: 12px;
			transition: inherit;
        }

        .wi-icon span
        {
            font-size: 10px;
            font-weight: 500;
            text-align: center;
			transition: inherit;
        }

		.wi-icons-new .wi-icon
		{
            padding: 12px;
		}

		.wi-icons-new .wi-icon img
		{
            height: 60px;
            width: 60px;
			margin-bottom: 0;
		}

        @media (max-width: 767px)
        {
            .wi-icons-new .wi-icon img
            {
                height: 48px;
                width: 48px;
            }
        }

        .wi-section,
		.wi-title
        {
            display: inline-block;
			margin-top: 0;
            margin-bottom: 21px;
            padding-bottom: 6px;
            border-bottom: 2px solid hsl(var(--primary-500));
            font-size: 18px;
            font-weight: 700;
        }

		.wi-title
		{
            margin-bottom: 30px;
            padding-bottom: 12px;
			border-width: 4px;
            font-size: 24px;
		}

        .wi-icons + .wi-icons
        {
            margin-top: 15px;
        }

        .wi-icons + .wi-section
        {
            margin-top: 60px;
        }
	</style>
</head>
<body class="bg-gray-50">

	<main id="app">

		<div class="container my-7 md:my-10">
			<div class="row mb-10">
				<div class="col-12 lg:col-6 px-7 sm:px-4 lg:py-10">

					<h1 class="wi-title">Meteocons</h1>
					<p class="lead">
						These hand crafted icons are designed in Adobe Illustrator and animated with
						SVG animations. They will look stunning in your work.
					</p>
					<p>
						The icons are available under a MIT-license, which means that it's free to
						use. The only requirement is that you should preserve copyright notices in
						all source files.
					</p>
					<a href="https://github.com/basmilius/weather-icons" rel="noopener" target="_blank" class="btn btn-contained is-primary mt-5">
						<span>View on GitHub</span>
					</a>
					<a href="https://bas.dev" rel="noopener" target="_blank" class="btn btn-outline bg-gray-0 is-primary mt-5">
						<span class="text-gray-700">bas.dev</span>
					</a>

				</div>
			</div>
			<div class="row">
				<div class="col-6 lg:col-4">

					<a href="index-fill.html" class="panel bg-gray-0 rounded-1 shadow-2 d-flex flex-column align-items-center p-7">
						<img src="./production/fill/all/clear-day.svg" alt="Filled icon style" height="120"/>
						<span class="h5">Filled</span>
					</a>

				</div>
				<div class="col-6 lg:col-4">

					<a href="index-line.html" class="panel bg-gray-0 rounded-1 shadow-2 d-flex flex-column align-items-center p-7">
						<img src="./production/line/all/clear-day.svg" alt="Outlined icon style" height="120"/>
						<span class="h5">Outlined</span>
					</a>

				</div>
			</div>
		</div>

	</main>

</body>
</html>
